<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv= "X-UA-COMPATIBLE" content="IE=edge,chrome=1" />
    <title>SVG</title>
    <style>
        .show-in-desktop{
            display: inline-block;
            vertical-align: middle;
        }

        .text {
            display: inline-block;
            height: 75px;
            line-height: 75px;
            vertical-align: middle;
        }

        .s1{
            font-weight: bold;
            font-size: 14px;
            color: #009DDC;
            display: inline-block;
            height: 75px;
            line-height: 75px;
        }

        .s2,.s3,.s4{
            display: inline-block;
            width: 4px;
            height: 4px;
            background-color: #009DDC;
            vertical-align: middle;
            opacity: 0;
        }

        .s2{
            animation: s2 2s infinite linear;
        }

        .s3{
            animation: s3 2s infinite linear;
        }

        .s4{
            animation: s4 2s infinite linear;
        }

        @keyframes s2 {
            0% {opacity: 0;}
            15% {opacity: 0;}
            25% {opacity: 1;}
            100% {opacity: 1;}
        }
        @keyframes s3 {
            0% {opacity: 0;}
            40% {opacity: 0;}
            50% {opacity: 1;}
            100% {opacity: 1;}
        }
        @keyframes s4 {
            0% {opacity: 0;}
            65% {opacity: 0;}
            75% {opacity: 1;}
            100% {opacity: 1;}
        }


    </style>
</head>
<body>
<div>
   <svg class="show-in-desktop" version="1.1" id="onmark" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
                                             width="75px" height="75px" viewBox="0 0 75 75" enable-background="new 0 0 75 75" xml:space="preserve">
                                            <defs>
                                                <mask id="globe-mask">
                                                    <linearGradient id="globe-mask-g" gradientUnits="objectBoundingBox" x1="0%" y1="0%" x2="100%" y2="0%">
                                                        <stop stop-color="rgb(0, 0, 0)" offset="0"/>
                                                        <stop id="globe-mask-g1" stop-color="rgb(0, 0, 0)" offset="0.70"/>
                                                        <stop id="globe-mask-g2" stop-color="rgb(255, 255, 255)" offset="0.7001"/>
                                                        <stop stop-color="rgb(255, 255, 255)" offset="1"/>
                                                    </linearGradient>
                                                    <path id="globe-mask-top" fill="#ffffff" d="M25.099,50.373c1.068,0.071,0.839,0.217,2.811-1.252c2.237-1.76,2.903-1.781,4.357-2.892
                                                        c3.02-2.02,5.004-0.488,6.228,0.602c3.901,3.676,2.323,1.566,4.544,3.32c2.628,2.085,2.503,1.314,5.925-1.931
                                                        c7.559-6.631,1.079-6.756,6.902-8.82c1.26-0.334,2.217-0.65,3.249-0.709c0.178-0.011,26.198-7.609,26.198-7.609L84.92,0.176H-0.025
                                                        v85l0.08-16.009L25.099,50.373z"/>
                                                    <path id="globe-mask-bot" fill="url('#globe-mask-g')" d="M25.179,50.197c1.068,0.071,0.839,0.217,2.811-1.252c2.237-1.76,2.903-1.781,4.357-2.892
                                                        c3.02-2.02,5.004-0.488,6.228,0.602c3.901,3.676,2.323,1.566,4.544,3.32c2.628,2.085,2.503,1.314,5.925-1.931
                                                        c7.559-6.631,1.079-6.756,6.902-8.82c1.26-0.334,2.217-0.65,3.249-0.709c0.178-0.011,26.198-7.609,26.198-7.609L85.055,85h-85
                                                        V69.167L25.179,50.197z"/>
                                                </mask>
                                                <mask id="onmark-arrlmask">
                                                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#ffffff" d="M34.62,47.653c0.724,0,1.715,0.292,2.256,0.603
                                                        c0.078,0.044,0.153,0.091,0.217,0.139l0.003-0.011l7.378,5.674c0.536,0.457,1.557,0.311,2.029-0.277l10.793-10.816l4.422,3.547
                                                        l-12.937,12.74c-1.09,1.07-1.851,1.658-3.308,1.715c-0.902,0.035-1.871-0.227-2.808-1.073c-2.361-1.871-4.271-3.348-6.636-5.22
                                                        c-0.728-0.574-1.964-0.516-2.588,0l-7.313,5.424l-0.019-0.031c-0.454,0.3-1.003,0.476-1.589,0.476c-1.61,0-2.918-1.315-2.918-2.935
                                                        c0-1.137,0.644-2.122,1.579-2.608l8.815-6.322C32.887,48.044,33.647,47.653,34.62,47.653L34.62,47.653z"/>
                                                </mask>
                                            </defs>
                                            <!-- globes -->
                                            <g mask="url('#globe-mask')">
                                                <g id="onmark-globe"></g>
                                            </g>
                                            <!-- Arrow -->
                                            <path id="onmark-arrow" fill-rule="evenodd" clip-rule="evenodd" fill="#009DDC" d="M55.824,44.407l-1.145-1.148l-0.026-0.022
                                                l-0.02-0.021h0.001c-0.141-0.159-0.229-0.366-0.229-0.598c0-0.439,0.315-0.806,0.733-0.876l8.236-2.206
                                                c0.107-0.044,0.222-0.069,0.345-0.069c0.489,0,0.885,0.395,0.885,0.89c0,0.101-0.02,0.205-0.053,0.297l-2.152,8.352
                                                c-0.068,0.423-0.432,0.745-0.873,0.745c-0.228,0-0.437-0.089-0.595-0.233l-0.001,0.004l-1.109-1.108L55.824,44.407z"/>
                                            <g mask="url('#onmark-arrlmask')">
                                                <path id="onmark-arrline" fill="none" d="M22.201,59.374c0,0,3.864-3.126,6.898-5.299c5.113-3.629,6.065-2.856,11.654,0.874
                                                    c5.375,3.708,4.198,3.804,9.192-1.312c1.563-1.593,8.467-8.071,8.467-8.071"/>
                                            </g>
                                            <path id="onmark-arrpath" fill="none" d="M25.08,57.021c0,0,0.985-0.708,4.02-2.881c6.822-5.168,7.155-6.668,13.261-1.73
                                                c2.937,2.354,7.42,1.084,9.42-0.5c1.563-1.593,12.522-12.154,12.522-12.154"/>
                                        </svg>
   <div class="text">
       <span class="s1">加载中</span>
       <span class="s2"></span>
       <span class="s3"></span>
       <span class="s4"></span>
   </div>

	</div>
   <script src="js/home.min.js"></script>
   <script type="text/javascript" src="js/index.js"></script>
</body>
</html>
